<!DOCTYPE html>
<html>

<head>
    <title>todolist</title>
    <script type="text/javascript" src="../../vue.js"></script>
</head>

<body>
    <div id='app'>
        <!-- 
			v-model : 双向绑定 
			什么意思呢? 在input里输入的内容会修改obj.$data.inputValue的值
			而在 obj.$data.inputValue 里修改值会影响这个input框的值
		 -->
        <input type="text" v-model="inputValue">
        <!-- 使用 v-on:click 绑定事件 -->
        <input type="submit" value="提交" v-on:click="tijiao">

        <ul>
            <li v-for="a in list">{{a}}</li>
        </ul>
    </div>

    <script type="text/javascript">
        var obj = new Vue({
            el: '#app',
            data: {
                list: ['呵呵', '哈哈'], //列表内容放到list里
                inputValue: '' //输入框内容放到inputValue里
            },
            methods: {
                tijiao: function() {
                    //获取输入框的内容写入到list里
                    this.list.push(this.inputValue)
                        //添加完后清空输入框数据
                    this.inputValue = ''
                }
            }
        });
    </script>
</body>

</html>